<script setup>
import { findTestData, findData } from '@/api/dashboard';
import * as echarts from 'echarts';
import { ref, onMounted, computed } from 'vue'

const data2 = ref()
const chartRef = ref();
//统计不同卷子考试的人数
onMounted(() => {
  //获取试卷的数据
  findTestData().then(({ code, msg, data }) => {
    if (code === 2000) {
      //获取的数据如何处理
      const re = data.map(item => {
        return {
          value: item.count,
          name: item.title
        }
      })
      option.series[0].data = re
      myChart.setOption(option)
    } else {
      ElMessage.error("后台数据获取失败");
    }

  })

  var myChart = echarts.init(chartRef.value)

  var option = {
    legend: {
      top: 'bottom'
    },
    toolbox: {
      show: true,
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {}
      }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [25, 170],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 8
        },
        data: [
          // { value: 40, name: 'r谁会1' },
          // { value: 38, name: 'rose 2' },
          // { value: 32, name: 'rose 3' },
          // { value: 30, name: 'rose 4' },
          // { value: 28, name: 'rose 5' },
          // { value: 26, name: 'rose 6' },
          // { value: 22, name: 'rose 7' },
          // { value: 18, name: 'rose 8' }
        ]
      }
    ]
  };

  myChart.setOption(option);

})
</script>
<template>
  <div style="text-align: center;margin-top: 20px;">每张试卷考试的人数</div>
  <div ref="chartRef" style="height: 660px;width: 660px;"></div>
</template>
 
<style scoped></style>